<!--
  Copyright (c) 2020 classmate-sun
  [Software Name] is licensed under Mulan PSL v2.
  You can use this software according to the terms and conditions of the Mulan PSL v2.
  You may obtain a copy of Mulan PSL v2 at:
          http://license.coscl.org.cn/MulanPSL2
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  See the Mulan PSL v2 for more details.
-->

<template>
  <div class="NotFound">
    <Nav></Nav>
    <div class="gamebox">
      <div
        class="game"
        v-for="item in gameList"
        :key="item"
        @click="handleClick(item.gameName)"
      >
        <img :src="item.gameIcon" alt />
        <p>{{ item.gameName }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";


export default {
  name: "Game",
  components: { Nav },
  data() {
    return {
      name: "",
      gameList: [],
      searchList: [],
      searchTitle: "",
      search: false,
    };
  },
  methods: {
    goHome() {
      this.$router.push({ path: `/` });
    },
    handleClick(name) {
      this.$router.push({ path: `/play/${name}` });
    },
  },
  mounted() {
    this.$ajax.post(this.$config.url +`/game/getGameList`).then((res) => {
      this.gameList = res.data.data;
    });
  },
};
</script>

<style scoped lang="less">
.NotFound {
  padding: 100px 0 0 0;
  .contain {
    width: 100%;

    ul {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      justify-content: flex-start;

      li {
        box-sizing: border-box;
        width: 25%;
        height: 150px;
        // background-color: #fff;
        margin-top: 2%;
        cursor: pointer;

        .a_box {
          margin: 0 auto;
          width: 95%;
          background-color: rgba(255, 255, 255, 0.8);
          transition: 0.3s;
          border-radius: 15px;
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 5px #fff;
          }

          a {
            display: block;
            padding: 20px;
            // background: #fff;
            color: #333;

            img {
              float: left;
              width: 40px;
              height: 40px;
              border-radius: 100%;
            }

            h3 {
              overflow: hidden;
              padding: 10px 15px 9px;
              height: 21px;
              font-weight: normal;
            }

            p {
              clear: both;
              display: -webkit-box;
              overflow: hidden;
              margin-top: 1rem;
              height: 60px;
              text-overflow: ellipsis;
              font-size: 13px;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
            }
          }
        }
      }
    }
  }
}
.gamebox {
  overflow: hidden;
  width: 1200px;
  height: 1000px;
  //background-color: #fff;
  margin: 0 auto;
  padding: 0px 0 40px 0;
  .game {
    width: 220px;
    height: 325px;
    margin: 10px;
    float: left;
    img {
      width: 220px;
      height: 307px;
      transition: 0.3s;
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 5px rgba(0, 0, 0, 0.4);
      }
    }
    p {
      width: 220px;
      height: 30px;
      font-size: 18px;
      line-height: 30px;
      text-align: center;
    }
  }
}
.bottomTip {
  display: block;
  width: 100%;
  height: 13px;
  font-size: 12px;
  line-height: 13px;
  text-align: center;
}
@media (max-width: 992px) {
  .search {
    width: 100%;
  }
  .searchList {
    width: 100%;
  }
  .gamebox {
    width: 100%;
  }
}
</style>